<template>
	<view class="blog-card">
	  <view class="blog-cover">
	    <!-- 博客封面占位 -->
	    <view class="cover-placeholder">
	      <image mode="aspectFill" src="/images/坚持.png">博客封面</image>
	    </view>
	  </view>
	  <view class="blog-info">
	    <view class="blog-meta">
	      <text class="blog-category">科技</text>
	      <text class="blog-time">10分钟前</text>
	    </view>
	    <h2 class="blog-title">探索人工智能的未来发展</h2>
	    <text class="blog-description">AI技术正在以前所未有的速度发展，从语音助手到自动驾驶，AI已经深入到我们生活的方方面面...</text>
	    <view class="blog-footer">
	      <text class="author">张伟</text>
	      <view class="stats">
	        <text class="stat">
					  **
	          <!-- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	            <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.03L12 21.35Z" fill="#9E9E9E"/>
	          </svg> -->
	          <text>1.2k</text>
	        </text>
	        <text class="stat">
					  **
	          <!-- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	            <path d="M18 16H6V4H13V3H6C4.9 3 4 3.9 4 5V16C4 17.1 4.9 18 6 18H18C19.1 18 20 17.1 20 16V9H19V16C19 16.55 18.55 17 18 17ZM14 2C14 1.45 14.45 1 15 1H18C18.55 1 19 1.45 19 2V5H17V3H15.5V4.5H15C14.45 4.5 14 4.05 14 3.5V2Z" fill="#9E9E9E"/>
	            <path d="M7 15H16V16C16 16.55 15.55 17 15 17H8C7.45 17 7 16.55 7 16V15Z" fill="#9E9E9E"/>
	          </svg> -->
	          <text>124</text>
	        </text>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
</script>

<style>
	.blog-card {
	  background-color: white;
	  border-radius: 12px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	  margin-bottom: 20px;
	  overflow: hidden;
	}
	
	.blog-cover {
	  position: relative;
	  height: 180px;
	  background-color: #f1f3f4;
	}
	
	.cover-placeholder {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #9e9e9e;
	  font-size: 0.9rem;
	}
	
	.cover-placeholder image{
		width: 100%;
		height: 100%;
	}
	
	.blog-info {
	  padding: 16px;
	}
	
	.blog-meta {
	  display: flex;
	  align-items: center;
	  margin-bottom: 12px;
	}
	
	.blog-category {
	  background-color: #f0f7ff;
	  color: #1890ff;
	  padding: 2px 8px;
	  border-radius: 4px;
	  font-size: 0.8rem;
	  margin-right: 10px;
	}
	
	.blog-time {
	  font-size: 0.8rem;
	  color: #9e9e9e;
	}
	
	.blog-title {
	  font-size: 1.1rem;
	  font-weight: 600;
	  margin-bottom: 8px;
	  color: #333;
	}
	
	.blog-description {
	  font-size: 0.9rem;
	  color: #666;
	  margin-bottom: 16px;
	  line-height: 1.5;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.blog-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.author {
	  font-size: 0.9rem;
	  color: #666;
	}
	
	.stats {
	  display: flex;
	  gap: 16px;
	}
	
	.stat {
	  display: flex;
	  align-items: center;
	  gap: 4px;
	  font-size: 0.8rem;
	  color: #9e9e9e;
	}
</style>